<script setup lang="ts">
</script>

<template>
  <div class="second-left-box">
    <el-popover
      placement="top-start"
      :width="154"
      trigger="hover"
    >
      <template #reference>
        <div class="two-item-box">
          <div class="co-box iconfont icon-yiyanghuatan" />
          <div class="o2-box iconfont icon-yangqi" />
        </div>
      </template>
      <template #default>
        <div class="pop-box">
          <div class="info-item">
            <div class="ch4-num info-num">
              89%
            </div>
            <div class="info-name">
              甲烷
            </div>
          </div>
          <div class="info-item">
            <div class="co-num info-num">
              32%
            </div>
            <div class="info-name">
              一氧化碳
            </div>
          </div>
          <div class="info-item ">
            <div class="smoke-num info-num">
              32%
            </div>
            <div class="info-name">
              烟感
            </div>
          </div>
          <div class="info-item">
            <div class="dust-num info-num ">
              32%
            </div>
            <div class="info-name">
              粉尘
            </div>
          </div>
        </div>
      </template>
    </el-popover>
  </div>
</template>

<style lang="scss" scoped>
.second-left-box,
      .second-right-box {
        width: 70px;
        height: 130px;

        /* border: 1px solid red; */
        .two-item-box {
          width: 40px;
          height: 68px;
          margin-top: 42px;
          margin-left: 6px;
          background: #f8fafd;
          border: 1px solid rgba($color: #000, $alpha: 0%);
          border-radius: 54px;
          box-shadow: 0 4px 8px 0 rgb(166 184 208 / 40%);
          opacity: 1;
          > div {
            width: 24px;
            height: 24px;
            margin-left: 8px;
            line-height: 24px;
            text-align: center;
            background: linear-gradient(180deg, #54aafe 0%, #4482ed 100%);
            border-radius: 24px;
            box-shadow: 0 2px 4px 0 #bbd2ff;
            opacity: 1;
          }
          .co-box {
            margin-top: 8px;
          }
          .o2-box {
            margin-top: 4px;
          }
        }
      }
</style>
<style lang="scss">
.el-popper {
  width: 154px;
    height: 158px;
  padding: 2px !important;
  background: rgb(234 244 251 / 80%) !important;
  border: 1px solid #fff !important;
  border-radius: 2px !important;
  box-shadow: 0 4px 8px 0 rgb(166 184 208 / 40%) !important;
  .pop-box {
    width: 150px;
    height: 160px;
    .info-item {
      display: flex;
      width: 145px;
      height: 32px;
      margin-top: 5px;
      background: #f8fafd;
      border-radius: 4px;
      opacity: 1;
      > div {
        line-height: 32px;
      }
      .info-num {
        width: 70px;
        height: 32px;
        text-align: center;
        border-radius: 4px 0 0 4px;
        opacity: 1;
      }
      .ch4-num {
        background: linear-gradient(133deg, #ff532e 0%, #ff66a4 100%);
      }
      .co-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .smoke-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .dust-num {
        background: linear-gradient(133deg, #2ff4a1 0%, #26c58b 100%);
      }
      .info-name {
        width: 65px;
        height: 32px;
        margin-left: 10px;
        color: #4e5969;
        font-weight: 600;
        font-size: 14px;
        font-family: PingFang,sans-serif;
        background-clip: text;
      }
    }
  }
}
</style>